<template>
  <div class="coupon">
    <div class="coupon_box">
      <div class="coupon_top">
        <div class="coupon_title">
          <el-icon><Search /></el-icon>
          <span class="coupon_title_content">筛选搜索</span>
        </div>
        <div class="coupon_reset_button">
          <el-button>重置</el-button>
          <el-button type="primary" @click="handlerFilter">查询搜索</el-button>
        </div>
      </div>
      <div class="coupon_bottom">
        <div class="coupon_bottom_label">
          <span class="coupon_input_label">优惠券名称：</span>
          <div class="coupon_input_box">
            <el-input type="text" v-model="name" placeholder="优惠券名称" />
          </div>
        </div>
        <div class="coupon_bottom_label">
          <span class="coupon_input_label">优惠券类型：</span>
          <div class="coupon_input_box">
            <el-select v-model="select" placeholder="全部" style="width: 115px">
              <el-option
                v-for="(item, index) in props"
                :key="item.value"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加 -->
    <div class="coupon_tianjin">
      <div class="coupon_left">
        <div class="coupon_left_icon">
          <el-icon><Tickets /></el-icon>
          <span class="coupon_left_icon_item">数据列表</span>
        </div>
      </div>
      <div class="coupon_right_btn">
        <el-button type="primary">添加</el-button>
      </div>
    </div>
    <div class="coupon_table">
      <el-table :data="tableList" border style="width: 100%">
        <el-table-column type="selection" width="60" />
        <el-table-column prop="id" width="200" label="编号" />
        <el-table-column prop="name" label="优惠券名称" width="180" />
        <el-table-column prop="type" label="优惠券类型" width="180">
          <template #default="scope">
            <div v-if="scope.row.type === 0">全场赠券</div>
            <div v-if="scope.row.type === 1">会员赠券</div>
            <div v-if="scope.row.type === 2">购物赠券</div>
            <div v-if="scope.row.type === 3">注册赠券</div>
          </template>
        </el-table-column>
        <el-table-column label="可使用商品" width="180">
          <template #default="scope">
            <div v-if="scope.row.useType === 0">全场通用</div>
            <div v-if="scope.row.useType === 1">指定分类</div>
            <div v-if="scope.row.useType === 2">指定商品</div>
          </template>
        </el-table-column>
        <el-table-column label="使用门槛" width="180">
          <template #default="scope">
            <div>满{{ scope.row.minPoint }}元可用</div>
          </template>
        </el-table-column>
        <el-table-column label="面值" width="100">
          <template #default="scope">
            <div>{{ scope.row.amount }}元</div>
          </template>
        </el-table-column>
        <el-table-column label="适用平台" width="90">
          <template #default="scope">
            <!-- 判定为哪个适用平台 -->
            <div v-if="scope.row.platform === 0 ? true : false">全平台</div>
            <div v-if="scope.row.platform === 1 ? true : false">移动平台</div>
            <div v-if="scope.row.platform === 2 ? true : false">pc平台</div>
          </template>
        </el-table-column>
        <el-table-column label="有效期" width="180">
          <template #default="scope">
            <div>
              {{ formatTime(scope.row.startTime) }}至{{
                formatTime(scope.row.endTime)
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="状态" width="100">
          <template #default="scope">
            <div v-if="formatTime(new Date() as any)>scope.row.endTime">
              已过期
            </div>
            <div v-if="formatTime(new Date() as any)<scope.row.endTime">
              未过期
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button link type="primary" size="small">查看</el-button>
            <el-button link type="primary" size="small">编辑</el-button>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin-top: 20px"
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :small="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import useTable from "@/hooks/useTable";
import * as coupon from "@/request/modules/coupon";
// 引入dayjs格式化时间
import formatTime from "@/utils/formatTime";
import { ref } from "vue";
import { Search, Tickets } from "@element-plus/icons-vue";

const select = ref("");

// 查询
const name = ref("");

const handlerFilter = () => {
  fetchData();
};

const props = [
  { value: "全场赠券" },
  { value: "会员赠券" },
  { value: "购物赠券" },
  { value: "注册赠券" },
];
let {
  tableList,
  fetchData,
  handleSizeChange,
  handleCurrentChange,
  pagination,
} = useTable(coupon.CouponListAPI, {
  name: name,
});
</script>

<style scoped lang="less">
.coupon {
  padding: 0 20px;
  .coupon_box {
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;
    box-shadow: 0 0 5px 3px #eee;
    .coupon_top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .coupon_title {
        display: flex;
        align-items: center;
        .coupon_title_content {
          font-size: 14px;
        }
      }
      .coupon_reset_button {
        display: flex;
        align-items: center;
        font-size: 12px;
      }
    }
    .coupon_bottom {
      display: flex;
      // flex-direction: column;
      padding: 20px 40px 0;
      .coupon_bottom_label {
        display: flex;
        align-items: center;
        padding: 20px 40px 0;
        .coupon_input_label {
          font-size: 14px;
          margin-right: 12px;
        }
        .coupon_input_box {
          width: 200px;
        }
      }
    }
  }
  .coupon_table {
    :deep(.el-table .cell) {
      font-size: 12px;
      text-align: center;
      padding-left: 10px;
      // line-height: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .coupon_tianjin {
    display: flex;
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;
    box-shadow: 0 0 5px 3px #eee;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
